
@extends('Admin.common.header')

<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}">  
<script src=" {{ asset('./js/jquery-1.8.3.min.js') }} "></script>
<script>
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	
	// 获取父类相对应的子类列表 
	// 参数：id值 id = 'category_1'
	var i=2;
	function getSonCategory( id ){
		// 将当前下拉框 以下的其他下拉框 全部清除
		$("#"+id).nextAll().remove();
		// 获取当前选择的分类id		
		var category_id	=	$("#"+id).val();	
		// 0代表根类 没有子类 要创建根类
		if( category_id==0 ){					
			return false;
		}
		// 按'_'分割 获取字母部分 category
		var arr=id.split('_'); 	
		// 给 下一级 下拉框 新的id名( category_2 )
		var new_id= arr[0]+'_'+i;	
		// 获取相对应的子类列表 
		$.ajax({
			type:"post",
			url:"{{ url('/category/getSonCategory') }}",
			data:{category_id:category_id,new_id:new_id,_token:_token},
			async:false,    						
			dataType:"html",
			success:function(back){
				if( back!='' ){
					// 在同辈后 追加
					$('#'+id).after(back);
					i++;
				}
			}
		});
	}
	
	$(function(){
	
		// 一进入页面就找一级分类下的子分类
		getSonCategory('category_1');
		
		
		// 点击 创建 编辑 分类
		$("button").click(function(){
			// 分类名
			var name	=	$("input[name='name']").val();
			// 定义 分类数组
			var category	= [];	
			// 定义 分类数组的下标				
			var num=1;				
			// 获取 每个下拉框的选中值
			$("select option:selected").each(function(){
				var category_id=$(this).val();
				category[num]=category_id;
				num++;
			});	
			num=1;
			
			// 获取是否有分类ID
			var category_id=$(this).attr('id');	
			
			if( category_id )
			{
				// 编辑
				var url = "{{ url('/category/doCreate') }}"+'/'+category_id;
			}else
			{
				// 创建
				var url = "{{ url('/category/doCreate') }}";
			}
			$.ajax({
				type:"post",
				url:url,
				data:{name:name,category:category,_token:_token},
				async:true,    						
				dataType:"json",
				success:function(back){
					// 2.模态框 不要动
					$('#show_info').html( '' );
					$('#show_info').html( back['show_info'] );
					location.reload();
				}
			});
		});
		
	});

</script>

<body style="background-color:#7A7A7A;">


<div style="margin-left:6%;margin-top:8%;color:#FFFFFF;width:98%;margin-bottom:70px;" class="form-horizontal">
	<br>
	
	<!-- 页面标记 -->
	<h3 style='color:white;margin-left:122px;margin-top:-30px;color:#D1EEEE' >		
		@if( isset($c_info->id ) )
			修改分类 
		@else
			新增分类 
		@endif
		
	</h3>
	
	<br>
	<br>
	
	<!-- 分类表单 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">选择分类</label>
		<div class="col-sm-10">
			
			<!-- 编辑 仅可查看 不能修改 -->
			@if( isset($c_info->id ) )
					
				@forelse( $category_path as $key => $category_info )
					
					<!-- 第一个 分类下拉框 -->
					@if( $key==1 )
						<select style="width:auto;float:left;" class="form-control" id="category_{{ $key }}" onchange="getSonCategory('category_{{ $key }}');" disabled >
						<option value="0" >1级分类</option>
						<!-- 遍历所有一级分类 -->
						@forelse( $all_first_category as $category )
							@if( $category_info['id']==$category->id )
								<!--第一级分类先选中 -->
								<option value="{{ $category->id }}" selected >
									{{ $category->name }}
								</option>
							@else
								<option value="{{ $category->id }}" >
									{{ $category->name }}
								</option>
							@endif
						@empty
						@endforelse
						</select>
					@else
					<!-- 第二个及以后分类下拉框 -->
					<script type='text/javascript'>
						$(function(){
							var id = {{ $key }};
							var cid = {{ $category_info['id'] }};
							// ajax必须同步才可以选中 异步会选不中
							$( "#category_"+id ).val(cid);
							// 不让选
							$( "#category_"+id ).attr('disabled',true);
							getSonCategory("category_"+id);
						}); 
					</script>
					@endif
				
				
				@empty
				@endforelse
			
			@else
				<!-- 创建 -->
				<select style="width:auto;float:left;" class="form-control" id="category_1" onchange="getSonCategory('category_1');"  >
				
					
					<option value="0" >1级分类</option>
					@forelse ($all_first_category as $category)
						<option value="{{ $category->id }}" >{{ $category->name }}</option>
					@empty
					@endforelse
				
				</select>
			@endif
			
			
			
		</div>
	</div>
	
	<!-- 分类名称 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">名称</label>
		<div class="col-sm-10">
			<input style="width:300px;" type="text" name="name" value="{{ $c_info->name or '' }}" class="form-control"  placeholder="分类名称">
		</div>
	</div>
	
	
	<!-- 背景图片 -->
	<div style="position:absolute;left:58%;top:26%;">
		<img src="{{ asset('./images/logo.png') }}" alt="">
	</div>
	<br>

	<!-- 1.模态框 不要动 -->
	<button  style="width:380px;margin-left:11.26%;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger" id="{{ $c_info->id or ''  }}">
		@if( isset( $c_info->id ) )
			修改分类 
		@else
			新增分类 
		@endif
	</button>
	<div  class="form-group" style="margin-top:20px;">
		<a href="{{ url('/category/index') }}" style="width:380px;margin-left:155px;" class="btn btn-success">
			列表
		</a>
	</div>
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document" id='show_info'  style="margin-top:80px;margin-left:570px;">
		</div>
	</div>

</div>

</body>

@extends('Admin.common.footer')